<template>
	<div class="headers">
		<sequence class="wow fadeInDown"></sequence>
		<div class="headersBody wow fadeInDown">
		
			<div class="headersBodyl">
				<span>公开</span>
				<span>公平</span>
				<span>公正</span>
				<span>高效</span>
			</div>
			<div class="headerTitle">
				<span>{{ name }}</span>
			</div>
			<div class="headersBodyr">
				<div class="dateTime">
					<span>{{ formattedDate }}</span>
					<span>{{ time }}</span>
				</div>
			</div>
		</div>
		<div class="back" v-if="back" @click="$router.go(-1);"><i class="el-icon-arrow-left"
			style="color: #fff;font-size: 20px;font-weight: bold;"></i></div>
	</div>
</template>

<script>
	import {
		WOW
	} from 'wowjs'
	import sequence from "./sequence/index.vue";
	import dayjs from 'dayjs';
	import 'dayjs/locale/zh-cn'; // 引入中文语言包
	import weekday from 'dayjs/plugin/weekday'; // 引入weekday插件
	dayjs.extend(weekday);
	dayjs.locale('zh-cn'); // 使用中文
	export default {
		name: "pageTop",
		components: {
			sequence
		},
		data() {
			return {
				formattedDate: '',
				time: '',
				timer: null
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			},
			back:Boolean,

		},
		mounted() {
			var wow = new WOW({
				boxClass: 'wow',
				animateClass: 'animated',
				offset: 0,
				mobile: true
			})
			wow.init();
			// 获取当前日期并使用dayjs格式化
			this.formatDate();
			this.updateTime();
			// 设置定时器每秒更新时间
			this.timer = setInterval(() => {
				this.formatDate();
			}, 1000);
		},
		beforeDestroy() {
			// 组件销毁前清除定时器
			clearInterval(this.timer);
		},
		methods: {
			formatDate() {
				const now = dayjs();
				this.formattedDate = now.format('YYYY-MM-DD HH : mm : ss'); // 格式化时间为 "2023-10-20 星期五"
			},
			updateTime() {
				const now = dayjs();
				this.time = now.format('dddd'); // 格式化时间
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headers {
		width: 100%;
		height: 108px;
		display: flex;
		position: relative;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: row;
		z-index: 100;
		align-content: flex-start;
		// background-image: url(./sequence/topbg/top_bg.png);
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: center center;
		.back {
		position: absolute;
		width: 30px;
		height: 30px;
		left: 20px;
		top: 30px;
		z-index: 11;

	}
	}

	.headersBody {
		position: relative;
		z-index: 10;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		.headersBodyl {
			width: 20%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding: 0 25px;

			span {
				font-size: 30px;
				font-family: YouSheBiaoTiHei;
				font-weight: 500;
				color: transparent;
				margin-right: 20px;
				background: linear-gradient(90deg, #55C2FF 56.62%, rgba(85, 194, 255, 0.16) 92.5%);
				-webkit-background-clip: text;
				-moz-background-clip: text;
				background-clip: text;
			}
		}

		.headersBodyr {
			width: 20%;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding: 0 30px;



			.dateTime {
				font-size: 16px;
				font-family: PingFang;
				font-weight: normal;
				color: #008EDE;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: flex-start;
				padding-bottom: 14px;


				span {
					margin-left: 10px;
				}
			}
		}

		.headerTitle {
			position: relative;
			z-index: 100;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			span {
				font-size: 46px;
				font-family: YouSheBiaoTiHei;
				font-weight: normal;
				color: #FFFFFF;
				letter-spacing: 4px;
				padding-top: 5px;
				text-shadow: 0px 4px 3.2px rgba(0, 0, 0, 0.25);
			}
		}
	}
</style>